<template>
  <div id="main">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">统计</el-breadcrumb-item>
      <el-breadcrumb-item>交易统计</el-breadcrumb-item>
    </el-breadcrumb>


    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">交易数据</span>
            <el-form ref="form" :model="form" label-width="80px">
              <el-row style="text-align: right" v-model="form.date">
                  <el-button-group v-model="form.date1">
                    <el-button size="small"  @click="date(1)" >昨天</el-button>
                    <el-button size="small"  @click="date(7)">最近7天</el-button>
                    <el-button size="small"  @click="date(30)">最近30天</el-button>
                  </el-button-group>
                  <el-date-picker
                      size="small"
                      v-model="form.date2"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="fetchData()" value-format="yyyy-MM-dd">
                  </el-date-picker>
              </el-row>
            </el-form>
        </div>
      </el-header>
      <el-main>
           <!-- 表格 -->
           <el-table
              :data="tableData"
              style="width: 50%;float: left;margin-left: 60px;">
              <el-table-column prop="browseSum" label="浏览人数" width="100"></el-table-column>
              <el-table-column prop="placeSum" label="下单人数" width="100"></el-table-column>
              <el-table-column prop="orderSum" width="100" label="订单数"></el-table-column>
              <el-table-column prop="singleNumber" label="下单件数" width="100"></el-table-column>
              <el-table-column prop="validSum" label="有效订单数" width="100"></el-table-column>
              <el-table-column width="100" prop="moneyAmount" label="下单金额"></el-table-column>
           </el-table>
            <el-table
              :data="tableData1"
              style="width: 50%;float: left;margin-left: 60px;test-align: center">
              <el-table-column prop="returnMoney" label="退款金额" width="100"></el-table-column>
              <el-table-column prop="payPersonsum" label="付款人数" width="100"></el-table-column>
              <el-table-column prop="payOrdersum" width="100" label="付款订单数"></el-table-column>
              <el-table-column prop="paySum" label="付款件数" width="100"></el-table-column>
              <el-table-column prop="payMoney" label="付款金额" width="100"></el-table-column>
              <el-table-column width="100" prop="unitPrice" label="客单价"></el-table-column>
           </el-table>
           <!-- 图形显示div -->
           <div id="main1" style="width: 600px;height:400px;margin-left: 600px"></div>
           <div id="main2" style="width: 1000px;height:400px;margin-left: 35px;"></div>
      </el-main>
    </el-container>
            
    
    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">订单来源构成</span>
          <!-- <el-form ref="form" :model="form" label-width="80px"> -->
            <el-row style="text-align: right">
                <el-button-group>
                  <el-button size="small" @click="orderSource(new Date)">本月</el-button>
                  <!-- <el-button size="small" @click="orderSource(1)">上月</el-button> -->
                </el-button-group>
            </el-row>
          <!-- </el-form>   -->
        </div>
      </el-header>
      <el-main>
          <div id="main3" style="width: 600px;height:600px;margin-left: 35px;float: left"></div>
          <el-table
              :data="tableData2"
              style="width: 42%;float: left;margin-left: 60px;test-align: center;margin-top: 200px">
              <el-table-column prop="source_type" width="100"></el-table-column>
              <el-table-column prop="money" label="付款金额" width="100"></el-table-column>
              <el-table-column prop="pay" label="较前一个月" width="100">
                    
              </el-table-column>
              <el-table-column prop="username" width="100" label="付款人数"></el-table-column>
              <el-table-column prop="paymoney" label="较前一个月" width="100">

              </el-table-column>
           </el-table>
      </el-main>
    </el-container>
            
  </div>
</template>
<script>
var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?1a009b6756d4991bc2db82ae9bc895da";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
</script>


<script>
const date=1;

var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?1a009b6756d4991bc2db82ae9bc895da";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();


export default {
  data () {
    return {
        tableData: [],
        tableData1: [],
        options: {},
        form: {},
        PicView: [],
        list: [{}],
        dataPicView: {},
        tableData2: [],
        people: []
    }
  },
  methods: {
    drawChart () {

      var myChart2 = this.$echarts.init(document.getElementById("main2"));
     
      // option.series[0].data=this.PicView
     
      const option2 = {
              // title: {
              //     text: '折线图堆叠'
              // },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      name: '浏览次数',
                      type: 'line',
                      stack: '总量',
                      data: [120, 132, 101, 134, 90, 230, 210]
                  },
                  {
                      name: '搜索引擎( UV )',
                      type: 'line',
                      stack: '总量',
                      data: [130, 132, 201, 334, 129, 133, 120]
                  }
              ],
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['浏览次数', '搜索引擎( UV )']
              }
          }
      myChart2.setOption(option2)

 
    //   this.$http.post('/apis/json/tongji/v1/ReportService/getData',{
    //     "header": {
    //         "username": "网络上的拳击手",
    //         "password": "Daganbuyidui",
    //         "token": "token",
    //         "account_type": 1,
    //         "withCredentials": true // 允许携带cookie
    //     },
    //     "body": {
    //         "site_id": "http://127.0.0.1:9999", //您的site_id
    //         "start_date": "20190501",
    //         "end_date": "20190531",
    //         "metrics": "pv_count,visit_count",
    //         "method": "trend/time/a",
    //         "max_results": "0",
    //         "gran": "day",
    //         "withCredentials": "true"
    //     }
    // })
    
    },
    fetchData () { 
        console.log(this.form)
        this.form.date1=this.form.date2[0]
        this.form.date2=this.form.date2[1]
        this.statistics()
        this.form={}
    },
    async statistics () {
        const { data: res } = await this.$http.post("/orders/statistics/dealfind",this.form);
        this.tableData = res.data
        this.tableData1 = res.data
        this.data = res.data
        // console.log(this.data[0].browseSum)
      
      // 获取漏斗图的id
      var myChart1 = this.$echarts.init(document.getElementById("main1"));

      // 为漏斗图中赋予动态的值
      console.log(this.data)
      const browseSum=this.data[0].browseSum
      const placeSum=this.data[0].placeSum
      const payPersonsum=this.data[0].payPersonsum

      const info=[{
          value: browseSum,
          name: '浏览'
        },{
          value: placeSum,
          name: '下单'
        },{
          value: payPersonsum,
          name: '付款'
        }]

         const option1= {
          // title: {
          //     text: '漏斗图',
          //     subtext: '纯属虚构'
          // },
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c}%"
          },
          toolbox: {
              feature: {
                  dataView: {readOnly: false},
                  restore: {},
                  saveAsImage: {}
              }
          },
          // legend: {
          //     data: ['展现','点击','访问','咨询','订单']
          // },
          series: [
              {
                  name:'统计',
                  type:'funnel',
                  left: '10%',
                  top: 60,
                  //x2: 80,
                  bottom: 60,
                  width: '80%',
                  // height: {totalHeight} - y - y2,
                  min: 0,
                  max: 100,
                  minSize: '0%',
                  maxSize: '60%',
                  sort: 'descending',
                  gap: 2,
                  label: {
                      show: true,
                      position: 'inside'
                  },
                  labelLine: {
                      length: 10,
                      lineStyle: {
                          width: 1,
                          type: 'solid'
                      }
                  },
                  itemStyle: {
                      borderColor: '#fff',
                      borderWidth: 1
                  },
                  emphasis: {
                      label: {
                          fontSize: 20
                      }
                  },
                  data: info
              }
          ]
      }
      myChart1.setOption(option1)
        // 显示图行界面
        // for (var i = 0; i < res.data.length; i++) {
            // this.PicView=({value: res.data[0].browseSum ,name: '浏览'},{value: res.data[0].placeSum,name: '下单'},{value: res.data[0].payPersonsum,name: '付款'})
        // }
     
        // for(const i in res.data){
        //   console.log(i)
        //     this.PicView.push({value: res.date[i].browseSum ,name: '浏览'},{value: res.date[i].placeSum,name: '下单'},{value: res.date[i].payPersonsum,name: '付款'})
        // }
        // console.log(this.PicView)
        // 将返回的对象转数组
        // for (const i in res.data) {
        //   this.$set(this.list[0], i, res.data[i])
        // }
        // const PicView = res.data
        // this.PicView.push({value: PicView.browseSum, name: '浏览'},{value: PicView.placeSum, name: '下单'},{value: PicView.payPersonsum,name: '付款'})
        // console.log(this.PicView)
        // var option=this.dataPicView
        // console.log(option)
        // for(const i in this.PicView){
        //      option.series[i].data=this.PicView[i]
        //      myChart.setOption()
        // }
        //  console.log(this.PicView)
    },
    // 根据固定的日期查询记录
    date (val) {
         const time=new Date(Date.now() - date*24*val*60*60*1000)
         this.form.date1 = time
         console.log(this.form.date1)
         this.statistics()
         val=0 
    },
    async orderSource () {
        const { data: res } = await this.$http.post(`/orders/statistics/orderSource`,this.date);
        this.tableData2=res.data
        console.log(res.data)
           for(let i=0;i<this.tableData2.length;i++){
             this.tableData2[i].paymoney="/"
             this.tableData2[i].pay="/"
             if(this.tableData2[i].source_type=="1"){
                    this.tableData2[i].source_type="App"
             }
             if(this.tableData2[i].source_type=="2"){
                    this.tableData2[i].source_type="微信"
             }
             if(this.tableData2[i].source_type=="3"){
                    this.tableData2[i].source_type="PC"
             }
             if(this.tableData2[i].source_type=="4"){
                    this.tableData2[i].source_type="小程序"
             }
             if(this.tableData2[i].source_type=="5"){
                    this.tableData2[i].source_type="其他"
             }
           }


         for(let i=0;i<this.tableData2.length;i++){
              // 订单来源图片显示
              this.people.push({value: this.tableData2[i].username,'name': this.tableData2[i].source_type})     
         }

         var myChart3 = this.$echarts.init(document.getElementById("main3"));
           const option3 = {
              title: {
                  text: '',
                  subtext: '商品订单',
                  left: 'center'
              },
              tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: ['App', '微信', 'PC', '小程序', '其他']
              },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: '55%',
                      center: ['50%', '60%'],
                      data: this.people,
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  }
              ]
          };
         myChart3.setOption(option3)
      
    }
  },
  created () {
      this.form.date1=new Date(Date.now() - date*24*60*60*1000)
      this.statistics()
  },
  mounted () {
    this.drawChart()
    this.orderSource()
  }
}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>